import React from 'react'
import styled from 'styled-components'

import Flex from '../components/Flex'
import Config from '../utils/config'
import Icon from '../components/Icon'

import defaultFace from '../components/Icon/logo1.svg'

const Context = styled(Flex)`
    cursor: pointer;
    &:hover > div {
        display: block;
    }
`

const LogoutTips = styled.div.attrs({
    className: 'logout-tips',
})`
    position: absolute;
    z-index: 99;

    display: none;

    width: 126px;
    top: 42px;
    right: 22px;
    font-size: 16px;
    line-height: 46px;
    text-align: center;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    background-color: #f7f7f7;
    color: #000;
    &:before {
        content: '';
        position: absolute;
        top: -10px;
        left: 0;
        right: 0;
        width: 20px;
        height: 10px;
        margin: auto;
        background-color: #f7f7f7;
        clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
    }
`

const UserInfoText = styled.div`
    font-size: 16px;
    color: white;
    padding: 10px 6px;
`

const Face = styled(Icon)`
    border-radius: 50%;
    margin: 0 10px;
`
const Container = styled(Flex)`
    height: ${Config.headerHeight}px;
    cursor: pointer;
    margin-right: 20px;
`

const HeaderUser = props => {
    return props.isLogined ? (
        <Container align="center" justify="space-between">
            <Face size={30} src={props.userFace} />
            <Context>
                <UserInfoText>{props.userName}</UserInfoText>
                <LogoutTips onClick={props.logoutUser}>退出登录</LogoutTips>
            </Context>
        </Container>
    ) : (
        <Container align="center" justify="space-between">
            <Face size={40} src={defaultFace} />
            <Context>
                <UserInfoText onClick={props.openLogin}>登录</UserInfoText>
                <UserInfoText onClick={props.openRegister}>注册</UserInfoText>
            </Context>
        </Container>
    )
}

export default HeaderUser



// WEBPACK FOOTER //
// ./src/containers/HeaderUser.js